import React, { Component } from "react";
import "./Mv.css";

class Mv extends Component {
	render() {
		let { mvArr, wvnames } = this.props;
		return (
			<div className="mv">
				<ul>
					{mvArr.map((item, index) => {
						return (
							<li key={item.id} onClick={wvnames(index)}>
								<img src={item.cover} alt="" />
								<h1 className="mvname">
									{item.name.length >= 5
										? item.name.substring(0, 5) + "..."
										: item.name}
								</h1>
								{/* <h2 className="artistnames" >{item.artistName}</h2> */}
								{item.checked ? (
									<h2 className="artistnames">{item.artistName}</h2>
								) : null}
							</li>
						);
					})}
				</ul>
			</div>
		);
	}
}

export default Mv;
